<template>
    <div class="page-manage">
        <span class="title">分网管理</span>
        <div class="container">
            <el-select v-model="value" placeholder="请选择地域查询">
                <el-option
                v-for="item in 4"
                :key="item"
                :label="item"
                :value="item">
                </el-option>
            </el-select>
            <span @click="newPage" style="padding-top: 20px; padding-left: 20px; display: inline-block; color: #409EFF; cursor: pointer;">+ 新增地域分网管理</span>
            <el-table
            :data="tableData"
            border
            style="width: 100%">
                <el-table-column
                fixed
                prop="address"
                label="地域名称"
                width="150">
                </el-table-column>
                <el-table-column
                prop="chong"
                label="权限设置">
                    <template slot-scope="scope">
                        <span v-for="item in scope.row.chong" :key="item" style="display: inline-block; width: 100px;">{{item}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                fixed="right"
                label="操作">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
                    <el-button type="text" size="small" @click="modify">修改</el-button>
                </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
const cityOptions = ['纪念馆管理', '北京祭祀财务统计', '推广财务统计', '劳务提现管理', '礼金管理', '分网管理', '帮助中心'];
  export default {
    data() {
      return {
        checkAll: false,
        checkedCities: [''],
        cities: cityOptions,
        value: '',
        isIndeterminate: true,
        tableData: [
            {
                address: '北京暑假i 哦的',
                chong: [
                    '纪念馆管理',
                    '帮助中心'
                ]
            }
        ]
      };
    },
    methods: {
      handleCheckAllChange(val) {
        this.checkedCities = val ? cityOptions : [];
        this.isIndeterminate = false;
      },
      handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.cities.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
      },
      newPage () {
          this.$router.push({
              path: '/pageList',
              query: {
                  type: 0
              }
          })
      },
      modify () {
          this.$router.push({
              path: '/pageList',
              query: {
                  type: 1
              }
          })
      }
    }
  };
</script>

<style lang="scss" scoped>
</style>
